<template>
    <div class="profile_container">
        <HeaderTop :goBack="true" :headTitle="'我的'"></HeaderTop>
        <section >
            <section class="profile_number">
                <router-link :to="isLogin?'/profile/info':'/login'" class="profile_link">
                    <img v-if="isLogin" :src="imgBasePath+user.avatar" class="privateImage" alt="avatar">
                    <span class="privateImage" v-else>
                        <svg class="privateImage_svg">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#avatar-default"></use>
                        </svg>
                    </span>
                    <div class="user_info">
                        <p>{{username}}</p>
                        <p>
                            <span class="user_icon">
                                <svg class="icon-mobile" fill="#fff">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#mobile"></use>
                                </svg>
                            </span>
                            <span class="icon_mobile_number">{{mobile}}</span>
                        </p>
                    </div>
                    <span class="arrow">
                        <svg class="arrow-svg" fill="#fff">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
                        </svg>
                    </span>
                </router-link>
            </section>
            <section class="info_data">
                <ul class="clear">
                    <router-link tag="li" to="/balance" class="info_data_link">
                        <span>
                            <b class="balance">{{parseInt(balance).toFixed(2)}}</b>元
                        </span>
                        <span>我的余额</span>
                    </router-link>
                    <router-link tag="li" to="/benefit" class="info_data_link">
                        <span>
                            <b class="count">{{count}}</b>个
                        </span>
                        <span>我的优惠</span>
                    </router-link>
                    <router-link tag="li" to="/points" class="info_data_link">
                        <span>
                            <b class="point">{{pointNumber}}</b>分
                        </span>
                        <span>我的积分</span>
                    </router-link>
                </ul>
            </section>
            <section class="profile-1reTe">
                <!-- 我的订单 -->
                <section @click="addDynamicRoute" class="profile_item">
                    <aside class="icon_left">
                        <svg fill="#4aa5f0">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#order"></use>
                        </svg>
                    </aside>
                    <div class="item_div">
                        <span>我的订单</span>
                        <span class="icon_right_svg">
                            <svg fill="#bbb">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
                            </svg>
                        </span>
                    </div>
                </section> 
                <!-- 积分商城 -->
                <router-link to="/dymic1" class="profile_item">
                    <aside class="icon_left">
                        <svg fill="#fc7b53">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#point"></use>
                        </svg>
                    </aside>
                    <div class="item_div">
                        <span>积分商城</span>
                        <span class="icon_right_svg">
                            <svg fill="#bbb">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
                            </svg>
                        </span>
                    </div>
                </router-link> 
                <!-- 云餐厅会员 -->
                <router-link to="/vipcard" class="profile_item">
                    <aside class="icon_left">
                        <svg fill="#ffc636">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#vip"></use>
                        </svg>
                    </aside>
                    <div class="item_div">
                        <span>云餐厅会员卡</span>
                        <span class="icon_right_svg">
                            <svg fill="#bbb">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
                            </svg>
                        </span>
                    </div>
                </router-link> 
            </section>
            <section class="profile-1reTe">
                <!-- 服务中心 -->
                <router-link to="/service" class="profile_item">
                    <aside class="icon_left">
                        <svg fill="#4aa5f0">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#service"></use>
                        </svg>
                    </aside>
                    <div class="item_div">
                        <span>服务中心</span>
                        <span class="icon_right_svg">
                            <svg fill="#bbb">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
                            </svg>
                        </span>
                    </div>
                </router-link> 
                <!-- 下载云餐厅APP -->
                <router-link to="/" class="profile_item">
                    <aside class="icon_left">
                        <svg fill="#4aa5f0">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#download"></use>
                        </svg>
                    </aside>
                    <div class="item_div">
                        <span>下载云餐厅APP</span>
                        <span class="icon_right_svg">
                            <svg fill="#bbb">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
                            </svg>
                        </span>
                    </div>
                </router-link> 
            </section>
        </section>
        <FooterGuide></FooterGuide>
        <transition name="route-slide">
            <router-view></router-view>
        </transition>
    </div>
</template>

<script>
import HeaderTop from '../../components/header/HeaderTop'
import FooterGuide from '../../components/footer/FootGuide'
import {mapState} from 'vuex'
import {imgBasePath} from '../../utils/config'
export default {
    components:{
        HeaderTop,
        FooterGuide
    },
    computed:{
        ...mapState(['user']),
        isLogin(){
            return this.user && this.user.user_id
        }
    },
    data(){
        return {
            imgBasePath,
            username:'注册/登录',
            mobile: '暂无绑定手机号',
            balance: 0,            //我的余额
            count : 0,             //优惠券个数
            pointNumber : 0,       //积分数
        }
    },
    mounted(){
        this.initData();
    },
    updated(){
        this.initData();
    },
    methods:{
        initData(){
            if(this.user && this.user.user_id){
                this.username=this.user.username;
                this.mobile = this.user.mobile || '暂无绑定手机号';
                this.balance = this.user.balance;
                this.count=this.user.gift_amount;
                this.pointNumber=this.user.point
            }else{
                this.username='注册/登录';
                this.mobile= '暂无绑定手机号';
                this.balance = 0
                this.count=0
                this.pointNumber=0
            }
        },
        addDynamicRoute(){
            console.log('添加动态路由')
            this.$router.addRoutes([
                {
                    path:'/dymic1',
                    component: ()=>import('./dynamic/PageA')
                }
            ])

        }
    }
}
</script>

<style lang="scss" scoped>
@import '~@styl/mixin.scss';
.profile_number{
    padding-top: 1.95rem;
    background: $blue;
    .profile_link{
        padding: 0.666rem 0.6rem;
        @include fj;
        align-items: center;
        .privateImage{
            @include wh(2.5rem,2.5rem);
            border-radius: 50%;
            .privateImage_svg{
                @include wh(100%,100%);
            }
        }
        .user_info{
            flex: 1;
            margin-left: 0.48rem;
            p{
                @include sc(0.8rem,#fff);
                font-weight: 700;
            }
            p:nth-of-type(2){
                @include fj(flex-start);
                height: 0.75rem;
                line-height: 0.75rem;
                margin-top: 0.2rem;
                .user_icon{
                    margin-right: 0.15rem;
                    vertical-align:middle;
                    .icon-mobile{
                        @include wh(0.6rem,0.75rem);
                    }
                }
                span{
                    @include sc(.57333rem,$fc);
                }
            }
        }
        .arrow{
            @include wh(.46667rem,.98rem);
            .arrow-svg{
                @include wh(100%,100%);
            }
        }
        
    }
}
.info_data{
    background: #fff;
    box-sizing: border-box;
    ul{
        display: flex;
        
    }
    .info_data_link{
        flex: 1;
        border-right: 0.025rem solid $bc;
        @include fj(center);
        flex-direction: column;
        align-items: center;
        &:nth-of-type(3){
            border: none;
        }
        span:nth-of-type(1){
            padding: 0.85333rem 0 0.45333rem;
            @include sc(0.55rem,#333);
            b{
                display: inline-block;
                @include sc(1.2rem,#f90);
                font-weight: 700;
                line-height: 1rem;
            }
            .count{
                color: #ff5f3e;
            }
            .point{
                color: $green;
            }
        }
        span:nth-of-type(2){
            padding-bottom: 0.45333rem;
            @include sc(0.57rem,#666);
            font-weight: normal;
        }
    }
}
.profile-1reTe{
    margin-top: 0.4rem;
    background: $fc;
    @include fj(flex-start);
    flex-wrap: wrap;
    .profile_item{
        width: 100%;
        display: flex;
        align-items: center;
        padding-left: 1.6rem;
        box-sizing: border-box;
        .icon_left{
            display: flex;
            @include wh(0.7rem,0.7rem);
            margin-left: -0.8666rem;
            margin-right: 0.2666rem;
            svg{
                @include wh(100%,100%);
            }
        }
        .item_div{
            flex: 1;
            display: flex;
            border-bottom: 0.025rem solid $bc;
            padding: 0.4333rem 0.2666rem 0.4333rem 0;
            @include sc(0.7rem,#333);
            span:nth-of-type(1){
                flex: 1;
            }
            .icon_right_svg{
                @include wh(0.46rem,0.46rem);
                svg{
                    @include wh(100%,100%);
                }
            }
        }
    }
}
.route-slide-enter,
.route-slide-leave-to
{
    transform: translateX(4rem);
    opacity: 0;
}
.route-slide-enter-active,
.route-slide-leave-active{
    transition: all 0.3s ease-in-out;
}
</style>